<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX&#x8bf7;&#x6c42;</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

/* From extension ms-toolsai.jupyter */
/* These classnames are inherited from bootstrap, but are present in most notebook renderers */

.alert {
    width: auto;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.alert > *:last-child {
    margin-bottom: 0;
}
#preview > .alert:last-child {
    /* Prevent this being set to zero by the default notebook stylesheet */
    padding-bottom: 1em;
}

.alert-success {
    /* Note there is no suitable color available, so we just copy "info" */
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-info {
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-warning {
    background-color: var(--theme-warning-background);
    color: var(--theme-warning-foreground);
}
.alert-danger {
    background-color: var(--theme-error-background);
    color: var(--theme-error-foreground);
}

</style>
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
        
    </head>
    <body class="vscode-body vscode-light">
        <h1 id="ajax请求">AJAX请求</h1>
<p><img src="https://gitee.com/krislin_zhao/IMGcloud/raw/master/img/20200605115127.png" alt=""></p>
<h1 id="创建xhr">创建XHR</h1>
<p>创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的</p>
<pre><code class="language-javascript">&lt;script&gt;
	<span class="hljs-keyword">var</span> xmlhttp =<span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();
	<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">write</span>(xmlhttp);
&lt;/script&gt;
</code></pre>
<h1 id="设置并发出请求">设置并发出请求</h1>
<p>XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？
通过<code>xmlhttp.onreadystatechange=checkResult</code>就可以指定用<code>checkResult</code> 函数进行处理。</p>
<h1 id="设置并发出请求">设置并发出请求</h1>
<p>通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是
/study/checkName.jsp
<code>xmlhttp.open(&quot;GET&quot;,url,true);</code>
通过send函数进行实际的访问
<code>xmlhttp.send(null);</code>
<code>null</code>表示没有参数，因为参数已经通过<code>GET</code> 方式，放在<code>url</code>里了。
只有在用<code>POST</code>，并且需要发送参数的时候，才会使用到<code>send</code>。
类似这样：
<code>xmlhttp.send(&quot;user=&quot;+username+&quot;&amp;password=&quot;+password)</code></p>
<h1 id="处理响应信息">处理响应信息</h1>
<p>在checkResult 函数中处理响应</p>
<pre><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">checkResult</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">if</span> (xmlhttp.<span class="hljs-property">readyState</span>==<span class="hljs-number">4</span> &amp;&amp; xmlhttp.<span class="hljs-property">status</span>==<span class="hljs-number">200</span>)  
     <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;checkResult&#x27;</span>).<span class="hljs-property">innerHTML</span>=xmlhttp.<span class="hljs-property">responseText</span>;
}
</code></pre>
<p><code>xmlhttp.readyState</code> 4 表示请求已完成
<code>xmlhttp.status</code> 200 表示响应成功
<code>xmlhttp.responseText</code>; 用于获取服务端传回来的文本
<code>document.getElementById('checkResult').innerHTML</code> 设置span的内容为服务端传递回来的文本</p>
<h1 id="步骤">步骤</h1>
<ol>
<li>创建XHR对象</li>
<li>设置响应函数</li>
<li>设置要访问的页面</li>
<li>发出请求</li>
<li>当服务端的响应返回，响应函数被调用。</li>
<li>在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span中。</li>
</ol>
<pre><code class="language-javascript">&lt;span&gt;输入账号 :&lt;/span&gt;
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;name&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;name&quot;</span> <span class="hljs-attr">onkeyup</span>=<span class="hljs-string">&quot;check()&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>&gt;</span> 
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;checkResult&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
<span class="hljs-keyword">var</span> xmlhttp;
<span class="hljs-keyword">function</span> <span class="hljs-title function_">check</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">var</span> name = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;name&quot;</span>).<span class="hljs-property">value</span>;
  <span class="hljs-keyword">var</span> url = <span class="hljs-string">&quot;https://how2j.cn/study/checkName.jsp?name=&quot;</span>+name;
  
  xmlhttp =<span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();
  xmlhttp.<span class="hljs-property">onreadystatechange</span>=checkResult; <span class="hljs-comment">//响应函数</span>
  xmlhttp.<span class="hljs-title function_">open</span>(<span class="hljs-string">&quot;GET&quot;</span>,url,<span class="hljs-literal">true</span>);   <span class="hljs-comment">//设置访问的页面</span>
  xmlhttp.<span class="hljs-title function_">send</span>(<span class="hljs-literal">null</span>);  <span class="hljs-comment">//执行访问</span>
}
  
<span class="hljs-keyword">function</span> <span class="hljs-title function_">checkResult</span>(<span class="hljs-params"></span>){
  <span class="hljs-keyword">if</span> (xmlhttp.<span class="hljs-property">readyState</span>==<span class="hljs-number">4</span> &amp;&amp; xmlhttp.<span class="hljs-property">status</span>==<span class="hljs-number">200</span>)
    <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;checkResult&#x27;</span>).<span class="hljs-property">innerHTML</span>=xmlhttp.<span class="hljs-property">responseText</span>;
   
}  
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</span></code></pre>

        
        
    </body>
    </html>